import React, { useState, useEffect } from "react";
import { Form, Card, Input, Button, message, Upload, Icon } from "antd";
import { get, post, put } from "../../../util/request"
const { TextArea } = Input;

function Edit(props) {
  // console.log(props);
  // props.match.params.id 存在的话表示修改，否怎为新增

 




  const { getFieldDecorator } = props.form;

  const [crdata, setData] = useState({
    "user_name": "",
    "roles": [],
    "white_list": []
  });

  useEffect(() => {
    console.log(props.match.params.id)
    if (props.match.params.id != undefined) {
      get("/v1/userroles/get", { "name": props.match.params.id }).then(response => {
        console.log(response)
        response.data.data["labels"] = JSON.stringify(response.data.data["labels"])
        setData(response.data.data)
      })
    }
  }, []);

  const handleSubmit = e => {
    // editorState.toHTML()获取当前富文本的内容
    // console.log(editorState.toHTML());
    e.preventDefault();
    //  验证
    props.form.validateFieldsAndScroll((err, values) => {
      if(!err){
        console.log(values)
        console.log("提交")

        if (! (values["roles"] instanceof Array)){
          values["roles"] = values["roles"].split(",")
        }
        if (! (values["white_list"] instanceof Array)  ){
          values["white_list"] = values["white_list"].split(",")
        }
        console.log(values)
        if (props.match.params.id != undefined) {
          //修改接口 
        
          put("/v1/userroles/put", values).then(res => {
            message.success("修改成功")
            console.log(res)
          }).catch(err => {
            message.error("修改失败"+err)
            console.log(err)
          })

        } else {
          // 新增接口
          post("/v1/userroles/post", values).then(res => {
            message.success("添加成功")
            console.log(res)
          }).catch(err => {
            message.success("添加失败"+err)
            console.log(err)
          })
        }


      }else{
          message.error("请输入正确内容")
          console.log(err)
      }
    
    });
  };
  return (
    <Card
      title="凭证编辑"
      extra={
        <Button onClick={() => props.history.push("/admin/users")}>
          返回
        </Button>
      }
    >
      <Form onSubmit={e => handleSubmit(e)}>
        <Form.Item label="用户名字" >
        {getFieldDecorator("user_name", {
            rules: [
              {
                required: true,
                message: "请输用户名称"
              }
            ],
            initialValue: crdata.user_name
          })(<Input placeholder="请输入用户名字" />)}
            
        </Form.Item>
        <Form.Item label="用户角色">
        {getFieldDecorator("roles", {
            rules: [
              {
                required: true,
                message: "请输入用户角色"
              }
            ],
            initialValue: crdata.roles
          })(<TextArea  rows={5} placeholder="请输入用户角色" />)}
        </Form.Item>

        <Form.Item label="白名单信息">
        {getFieldDecorator("white_list", {
            rules: [
              {
                required: true,
                message: "请输白名单信息"
              }
            ],
            initialValue: crdata.white_list
          })(<TextArea  rows={10} placeholder="请输入白名单信息" />)}
        </Form.Item>

        <Form.Item>
          <Button htmlType="submit" type="primary">
            保存
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}

export default Form.create({ name: "productEdit" })(Edit);
